<script setup lang="ts">
import type { CodeMateMethod, CodeMateModel } from '@/apis/code/codeMateApi'
import type { DataAction } from '@/components/DataForm/types'
import { inject, reactive, ref } from 'vue'
import { codeMateMethodApi, CodeMateMethodTypes } from '@/apis/code/codeMateApi'
import { useTable } from '@/components/DataPage/useTable'
import { codeMethodFields } from './codeMate'

const { parent, data } = defineProps<{ parent: Partial<CodeMateModel>, data: CodeMateMethod[] }>()

const {
  Table,
  tableData,
  openRowEdit,
  openRowEditAll,
  submitRowEditAll,
  cancelRowEditAll,
} = useTable<undefined, CodeMateMethod>({
  data,
  tableFields: codeMethodFields,
})

const api = codeMateMethodApi
const rowEditNum = ref(0)

const loadProjectData = inject<() => Promise<void>>('loadProjectData')
const clickTreeNode = inject<(id: number) => void>('clickTreeNode')
async function rowSubmitSuccess() {
  loadProjectData && await loadProjectData();
  (tableData.value as CodeMateMethod[]).sort((a, b) => a.priority - b.priority)
}

const actions = reactive<Record<string, DataAction>>({
  detail: {
    label: '详情',
    type: 'success',
    authCode: 'code:mate:module:modify',
    click: (row: any) => { clickTreeNode && clickTreeNode(row.id) },
  },
  modify: {
    label: '编辑',
    type: 'primary',
    authCode: 'code:mate:module:modify',
    click: async (_: any, index?: number) => await openRowEdit(index!, api.modify),
  },
  remove: {
    label: '删除',
    type: 'danger',
    authCode: 'code:mate:project:remove',
    confirm: '删除不可恢复，请谨慎确认',
    click: data => api.remove(data.id),
    success: async (_: any, index?: number) => {
      (tableData.value as any[]).splice(index!, 1)
      loadProjectData && await loadProjectData()
    },
    message: true,
  },
})
</script>

<template>
  <el-divider content-position="left">
    方法列表
  </el-divider>
  <div class="flex flex-row flex-justify-end">
    <el-button v-if=" (tableData as CodeMateMethod[]).length > 0 " type="primary" @click="openRowEditAll(api.modify)">
      编辑全部
    </el-button>
    <el-dropdown
      class="ml-3" trigger="click" :show-arrow="false" :hide-on-click="false"
      split-button type="primary" @click="() => openRowEdit(0, api.create, { parentId: parent.id, priority: 1 })"
      @command="methodType => openRowEdit(0, api.create, { parentId: parent.id, priority: 1, type: methodType.value, name: methodType.name, remark: methodType.remark })"
    >
      添加方法
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="methodType in CodeMateMethodTypes" :key="methodType.value"
            :command="methodType"
          >
            <el-text v-if="methodType.value.endsWith('CMD')" type="success">
              {{ methodType.label }}
            </el-text>
            <el-text v-if="methodType.value.endsWith('QUERY')" type="primary">
              {{ methodType.label }}
            </el-text>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <Table
    class="mt-2" :row-actions="[actions.detail, actions.modify, actions.remove]"
    @row-submit-success="rowSubmitSuccess"
    @row-edit-change="(indexList:number[]) => rowEditNum = indexList.length"
  />
  <div class="mt-2 flex flex-row flex-justify-end">
    <el-button v-if=" (tableData as CodeMateMethod[]).length > 0 && rowEditNum > 0 " type="primary" @click="submitRowEditAll">
      保存全部
    </el-button>
    <el-button v-if=" (tableData as CodeMateMethod[]).length > 0 && rowEditNum > 0" @click="cancelRowEditAll">
      取消全部
    </el-button>

    <el-dropdown
      class="ml-3" trigger="click" :show-arrow="false" :hide-on-click="false"
      split-button type="primary" @click="() => openRowEdit((tableData as CodeMateMethod[]).length ?? 0, api.create, { parentId: parent.id, priority: ((tableData as CodeMateMethod[]).length ?? 0) + 1 })"
      @command="methodType => openRowEdit((tableData as CodeMateMethod[]).length ?? 0, api.create, { parentId: parent.id, priority: ((tableData as CodeMateMethod[]).length ?? 0) + 1, type: methodType.value, name: methodType.name, remark: methodType.remark })"
    >
      添加方法
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="methodType in CodeMateMethodTypes" :key="methodType.value"
            :command="methodType" :disabled="parent.primaryFieldId !== undefined"
          >
            <el-text v-if="methodType.value.endsWith('CMD')" type="success">
              {{ methodType.label }}
            </el-text>
            <el-text v-if="methodType.value.endsWith('QUERY')" type="primary">
              {{ methodType.label }}
            </el-text>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
